react-bootstrap

What is react-bootstrap?

The react-bootstrap npm package is a library of reusable front-end components that are built with React and Bootstrap. It allows developers to use Bootstrap components as React components, which can be easily integrated into React applications. This package provides a consistent framework for building responsive and accessible web interfaces.

What are react-bootstrap's main functionalities?

Layout

React-bootstrap provides a grid system for creating layouts using Container, Row, and Col components, which are based on Bootstrap's grid system.

{"import { Container, Row, Col } from 'react-bootstrap';
<Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
</Container>"}

Navigation

React-bootstrap provides components for building navigation bars, including responsive navbars that can collapse at certain breakpoints.

{"import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
<Navbar bg='light' expand='lg'>
  <Navbar.Brand href='#home'>React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls='basic-navbar-nav' />
  <Navbar.Collapse id='basic-navbar-nav'>
    <Nav className='mr-auto'>
      <Nav.Link href='#home'>Home</Nav.Link>
      <Nav.Link href='#link'>Link</Nav.Link>
      <NavDropdown title='Dropdown' id='basic-nav-dropdown'>
        <NavDropdown.Item href='#action/3.1'>Action</NavDropdown.Item>
        <NavDropdown.Item href='#action/3.2'>Another action</NavDropdown.Item>
        <NavDropdown.Item href='#action/3.3'>Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href='#action/3.4'>Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>"}

Forms

React-bootstrap provides form components that include various types of inputs, labels, and buttons, making it easy to build and style forms.

{"import { Form, Button } from 'react-bootstrap';
<Form>
  <Form.Group controlId='formBasicEmail'>
    <Form.Label>Email address</Form.Label>
    <Form.Control type='email' placeholder='Enter email' />
    <Form.Text className='text-muted'>
      We'll never share your email with anyone else.
    </Form.Text>
  </Form.Group>

  <Form.Group controlId='formBasicPassword'>
    <Form.Label>Password</Form.Label>
    <Form.Control type='password' placeholder='Password' />
  </Form.Group>
  <Button variant='primary' type='submit'>
    Submit
  </Button>
</Form>"}

Modals

React-bootstrap provides a Modal component that can be used to create dialog prompts and pop-ups, which are customizable and can be controlled programmatically.

{"import { Modal, Button } from 'react-bootstrap';
function MyModal(props) {
  return (
    <Modal {...props} size='lg' aria-labelledby='contained-modal-title-vcenter' centered>
      <Modal.Header closeButton>
        <Modal.Title id='contained-modal-title-vcenter'>
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p>This is a modal body.</p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}"}

Other packages similar to react-bootstrap

reactstrap

reactstrap is another library of React components that are built with Bootstrap. It is similar to react-bootstrap but is specifically built for Bootstrap 4, whereas react-bootstrap has also started supporting Bootstrap 5.

ant-design

ant-design, also known as Ant Design, is a design system and React UI library that offers a suite of high-quality components and demos for building rich, interactive user interfaces. It is an alternative to react-bootstrap with a different design language and a larger set of components.

material-ui

material-ui, now known as MUI, provides a set of React components that implement Google's Material Design. It is an alternative to react-bootstrap with a focus on Material Design principles, offering a different look and feel as well as a comprehensive component library.

README

React-Bootstrap

Bootstrap 3 components built with React.

Under active development - APIs will change. Check out the 1.0.0 roadmap and contributing guidelines to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes will result in a minor version bump.

Docs

See the documentation with live editable examples.

Related modules

• react-router-bootstrap – Integration with React Router
• React Bootstrap Extended - A version of React Bootstrap where each component has extra props that map to bootstrap's utility classes. For example, pullRight adds the class pull-right to a component.

Local setup

• Install the dependencies with npm install
• Run tests npm test
• Run tests in watch mode npm run tdd
• Run the docs site in development mode with npm run docs. This will watch for file changes as you work. Simply refresh the page to see the updates.
• Build with npm run build

Contributions

Yes please! See the contributing guidelines for details.